<template>
    <div class="login">
        <p class="title">VTS维护信息管理系统</p>
        <p class="prelogin">请先登录您的账号</p>
        <div class="loginTxt">
            <div class="formtxt">
                <el-form ref="form" :model="form" id="form1">
                    <el-form-item >
                        <el-input v-model="form.name" placeholder="用户名" type="text" prefix-icon="iconfont icon-icon"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="form.password" placeholder="密码" prefix-icon="iconfont icon-mima1"></el-input>
                    </el-form-item>
                    <el-form-item id="el_form">
                        <el-button type="primary" @click="login" :plain="true">登陆</el-button>
                        <el-button type="primary" @click="forbackIndex">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
           
        </div>
    </div>
</template>

<script>
import api from '../../utils/api';
import pipe from '../../assets/js/pipe.js';
export default {
    data(){
        return{
            form: {
                name: '',
                password:''
            },
        }
    },
    methods:{
        // 用户登陆
        login(){
            let data = {
                params:pipe.pipeData("loginname="+this.form.name+"&password="+this.form.password)
            }
            var that = this;
             this.$axios._post(api.judgeUser,data).then(res=>{
                if (res.data.success) {
                    window.console.log(res);
                    var response = res.data.data;
                        // that.setCookie("token",res.data.data.token);
                        // var token = that.getCookie("token");
                 
                    localStorage.setItem('_islogin', '1')
                    localStorage.setItem('_loginName', response.loginName)
                    localStorage.setItem('_userName', response.userName)
                    localStorage.setItem('_roleId', response.roleId)
                    localStorage.setItem('_marine', response.marine_board_code_text)
                    localStorage.setItem('_marineCode', response.marineBoardCode)
                    // var userInfo = {
                    //     _token:response.token,
                    //     loginName:localStorage.getItem('_loginName'),//登陆名
                    //     userName:localStorage.getItem('_userName'),//用户名
                    //     email:localStorage.getItem('_email'),//邮箱
                    //     personId:response.id,//用户id
                    //     marineBoardCode:response.marineBoardCode,//所属海事局编号
                    //     marine_board_code_text:localStorage.getItem('_marine'),//所属海事局名称
                    //     password:response.password,//密码
                    //     phone:response.phone,//电话
                    //     roleId:response.roleId,//角色id
                    //     roleName:response.roleName,//角色名
                    //     status:response.status//	状态
                    // }
                    that.$store.commit("change",{
                        _token:response.token,
                        loginName:localStorage.getItem('_loginName'),//登陆名
                        userName:localStorage.getItem('_userName'),//用户名
                        email:localStorage.getItem('_email'),//邮箱
                        personId:response.id,//用户id
                        marineBoardCode:response.marineBoardCode,//所属海事局编号
                        marine_board_code_text:localStorage.getItem('_marine'),//所属海事局名称
                        password:response.password,//密码
                        phone:response.phone,//电话
                        roleId:response.roleId,//角色id
                        roleName:response.roleName,//角色名
                        status:response.status//	状态
                    })
                       

                  
                    // response.addCookie(token);//设置cookie,将cookie存放到respones里面

                        // window.console.log(token);
                        that.$message({
                            message: '登陆成功',
                            type: 'success',
                            duration:'1000',
                            showClose:false,
                            center:true
                        });
                        that.$router.push('/index');
                }
                 if(res.data.code == -1){
                    that.$message({
                        message:res.data.msg ,
                        type: 'error',
                        duration:'2000',
                        showClose:false,
                        center:true
                    });
                }
            }).catch(err=>{
                that.$message.error(err && err.message);
            }).finally(()=>{

            })
        },
        //设置cookie
        setCookie(name,value){
            var Days = 7;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*24*60*60*1000);
            document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
        },
        getCookie(name){
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg)){
                return unescape(arr[2]);
            }else{
                return null;
            }
        },
        //取消返回首页
        forbackIndex(){
            this.$router.push('/index');
        }
    }
}
</script>
<style scoped lang="scss">
    .login{
        width:100vw;
        height:100vh;
        background-color:#fff;
        .title{
            line-height:30px;
            text-align:center;
            margin-top:50px;
        }
        .prelogin{
            padding-left:20px;
            font-size:0.8rem;
            line-height:2rem;
            margin-top:40px;
        }
        .loginTxt{
            width:80vw;
            overflow: hidden;
            margin:0 auto 0;
            border:1px solid #eee;
            border-radius: 5px;
            padding:20px;
            .loginLogo{
                width:50%;
                height:50px;
                float:left;
                margin-bottom:10px;
                img{
                    display:block;
                    height:100%;
                }
            }
            .name{
                width:50%;
                height:50px;
                float:left;    
                margin-bottom:10px;
                P{
                    line-height:20px;
                    font-size:13px;
                }
            }
            .formtxt{
                clear:both;
            }
        }
    }
</style>
<style>
#form1 .el-form-item__content .el-input{
    width:100%;
}
</style>

